<template>
  <div class="home-container">
    <!-- 顶部导航栏组件 -->
    <HeaderBar :userInfo="userStore.userInfo" @logout="handleLogout" />

    <!-- 主要内容区域组件 -->
    <MainContent :userInfo="userStore.userInfo" @featureClick="handleFeatureClick" />

    <!-- 快速操作区域组件 -->
    <div style="max-width: 1600px; margin: 0 auto; padding: 0 32px 64px">
      <QuickActions @actionClick="handleFeatureClick" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { showSuccess } from '@/utils/error'
import HeaderBar from '@/components/HeaderBar.vue'
import MainContent from '@/components/MainContent.vue'
import QuickActions from '@/components/QuickActions.vue'
import { logoutUsingPost } from '@/api/accountController'
import { message } from 'ant-design-vue'

const router = useRouter()
const userStore = useUserStore()

const handleLogout = async (): void => {
  console.log(userStore.getUserInfo().token)

  const request = {
    token: userStore.getUserInfo().token
  }
  const response = await logoutUsingPost(request)
  if (response.data.code === 200) {
    window.electron.ipcRenderer.invoke('logout', {
      token: userStore.getUserInfo().token
    })
    userStore.logout()
    showSuccess('已退出登录')
    router.push('/login')
  } else {
    message.error('退出登录失败')
  }
}

const handleFeatureClick = (feature: string): void => {
  // 这里可以根据需要实现具体的功能
  console.log('Feature clicked:', feature)
  showSuccess(`功能 ${feature} 正在开发中...`)
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container > div:last-child {
    padding: 0 20px 40px !important;
  }
}
</style>
